<!--
 * @author: 十一
 * @since: 2024-08-29
 * index.vue
 * @desc: new page
-->
<template>
  <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :customRequest="uploadFile"
  >
    <img v-if="file_url" :src="file_url" alt="avatar" style="width: 100%" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { PostUploadFileApi } from "@/api/main";
const loading = ref<boolean>(false);
const file_url = ref("");

interface UploadFileProps {
  file_url: string; // 图片地址
}
// 接受父组件参数
const props = withDefaults(defineProps<UploadFileProps>(), {
  file_url: "",
});
file_url.value = props.file_url;
// 暴露事件
const emit = defineEmits(["update:file_url"]);

const uploadFile = (info: any) => {
  let formData = new FormData();
  formData.append("file", info.file);
  PostUploadFileApi(formData).then((response: any) => {
    file_url.value = response.result;
    emit("update:file_url", response.result);
  });
};
</script>

<style scoped></style>
